<!-- 菜单管理 -->
<template>
  <div class='menuManagement_container main_container'>
    <div style="height: 100%">
      <div class="search_form_box">
        <el-button size="mini" type="primary" @click="addShow">新增菜单</el-button>
      </div>

      <div class="table_box">
        <materialTable :tableHead="tableHead" :tableData="tableData" ></materialTable>
      </div>

    </div>

    <el-dialog @open="openDialog" :title="dialog.title" :close-on-click-modal="false" custom-class="add_dialog" :visible.sync="dialog.show">
      <div class="add_box" v-if="dialog.title=='新增菜单'">
        <div class="tree_box">
          <el-tree
            :data="treeData"
            highlight-current
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>

        <el-form :model="addForm" ref="addForm" :rules="rules" label-position="right" >
          <form-item 
            label="名称"  
            model="menuName" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="序号"  
            model="priority" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单路径"  
            model="uri" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单类型"  
            model="isButtonType" 
            type="radio"
            :radioList="radioList"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单编码"  
            model="menuCode" 
            type="input"
            v-if="addForm.isButtonType == 1"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="icon"  
            model="icon" 
            type="input"
            :addForm="addForm"
          ></form-item>

          <div style="width:100%;text-align:right;">
            <el-button type="primary" size="mini" @click="addSubmit">确 定</el-button>
          </div>
        </el-form>

      </div>

      <div v-else class="update_box">
        <el-form ref="addForm" :rules="rules" :model="addForm"  label-position="right">
          <form-item 
            label="名称"  
            model="menuName" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="序号"  
            model="priority" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单路径"  
            model="uri" 
            type="input"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单类型"  
            model="isButtonType" 
            type="radio"
            :radioList="radioList"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="菜单编码"  
            model="menuCode" 
            type="input"
            v-if="addForm.isButtonType == 1"
            :addForm="addForm"
          ></form-item>
          <form-item 
            label="icon"  
            model="icon" 
            type="input"
            :addForm="addForm"
          ></form-item>
        </el-form>
      </div>

      

      <div v-if="dialog.title=='编辑菜单'" slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialog.show = false">取 消</el-button>
        <el-button size="mini" :loading="btnLoading" type="primary" @click="editSubmit" >确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import materialTable from "@/components/assembly/materialTable";
import pagination from "@/components/assembly/pagination";
import { createNamespacedHelpers } from "vuex";
let { mapActions } = createNamespacedHelpers("menuManagement");
export default {
  name: 'menuManagement',
  data() {
    return {
      siteId: '10',
      btnLoading: false,
      dialog: {
        show: false,
        title: '',
      },
      tableHead: {
        keyId: "index",
        treeProps: { children: "children", hasChildren: "hasChildren" },
        setFunction: [
          // {
          //   fun: this.addShow,
          //   name: "新增"
          // },
          {
            fun: this.editShow,
            name: "编辑",
            hideKey:"editShow",
            showState:"0"
          },
          {
            fun: this.deleteSub, 
            name: "删除",
            hideKey: "editShow",
            showState: "0"
          }
        ],
        data: [
          {
            name: "产品名称",
            key: "productNameCopy",
          },
          {
            name: "菜单名称",
            key: "menuName",
            align: "center"
          },
          {
            name: "菜单类型",
            key: "isButtonType",
            align: "center",
            filter: {
              "0": "普通菜单",
              "1": "按钮"
            }
          }
        ]
      },
      tableData: [],
      treeData: [],
      radioList: [
        { value: 0, label: '普通菜单' },
        { value: 1, label: '按钮' }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      addForm: {
        productId: "",
        menuId: "",
        isButtonType: 0,
        menuName: "",
        uri: "",
        priority: "",
        icon: '',
      },
      productId: "11",
      menuId: "",
      rules: {
        menuName: [
          { required: true, message: '请输入菜单名称', trigger: 'change' }
        ],
        priority: [
          { required: true, message: '请输入序号', trigger: 'change' }
        ],
        // uri: [
        //   { required: true, message: '请输入菜单路径', trigger: 'change' }
        // ],
        isButtonType: [
          { required: true, message: '请选择菜单类型', trigger: 'change' }
        ],
        menuCode: [
          { required: true, message: '请输入菜单编码', trigger: 'change' }
        ],
      },

    }
  },


  created() {
    this.initData();
  },

  mounted() {
    
  },
  

  methods: {
    ...mapActions(["post", "export", "formGet"]),

    initData() {
      let data = {
        productId: 11
      };
      this.post({
        API: "search",
        data: data
      }).then(res => {
        this.tableData = res;
        this.tableData[0].productNameCopy = res[0].productName;
      }).catch(err => {
        this.$message.error(err);
      });
    },

     handleSelectionChange(item) {
      //删除
      this.deleteArr = [];
      item.forEach(item => {
        this.deleteArr.push(item.menuId);
      });
    },

    handleNodeClick(data) {
      this.addForm.menuId = data.menuId;
      console.log(this.addForm.menuId);
    },

    // 创建账户
    addShow() {
      this.post({
        API: "selectMenuList",
        data: {
          productId: this.productId
        }
      }).then(res => {
        this.treeData = res;
        this.dialog = {
          title: "新增菜单",
          show: true
        }
      }).catch(err => {
        this.$message.error(err);
      });

    },

    addSubmit() {
      this.addForm.productId = this.productId;
      this.addForm.parent = this.addForm.menuId;
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          this.post({
            API: "add",
            data: this.addForm
          }).then(res => {
            this.$message.success("新增成功");
            this.dialog.show = false;
            this.initData();
          }).catch(err => {
            this.$message.error(err);
          });
        } else {
          return false;
        }
      });
    },

    // 移除账户
    deleteSub(rowData) {
     
      this.$confirm("是否删除", "提示", {
        confirmButtonText: "确 定",
        cancelButtonText: "取 消",
        type: "warning"
      }).then(() => {
        this.formGet({
          API: "delete",
          data: {
            id: rowData.row.menuId
          }
        }).then(
          res => {
            this.$message.success("删除成功");
            this.initData();
          },
          err => {
            this.$message.error(err);
          }
        );
      })
      .catch({});
    },


    // 编辑 回显
    editShow(rowData) {
      this.menuId = rowData.row.menuId;
      this.productId = rowData.row.productId;
      this.formGet({
        API: "editShow",
        data: {
          id: this.menuId
        }
      }).then(res => {
        this.dialog = {
          title: "编辑菜单",
          show: true
        };
        this.$nextTick(() => {
          this.addForm = res;
        })

      }).catch(err => {
        this.$message.error(err);
      });
    },

    // 编辑 提交
    editSubmit() {
      this.btnLoading = true;
      this.post({
        API: "edit",
        data: { ...this.addForm, ...{ productId: this.productId } }
      }).then(res => {
        this.$message.success("编辑成功");
        this.dialog.show = false;
        this.initData();
      }).catch(err => {
        this.$message.error(err);
        this.btnLoading = false;
      });
    },

    openDialog() {
      this.$nextTick(() => {
        this.$refs.addForm.resetFields();
      })
      this.btnLoading = false;
    }

 
  },

  components: {
    materialTable,
    pagination,
  }
}
</script>

<style scoped lang="less">
.menuManagement_container {
  .table_box {
    height: calc(100% - 52px);
  }
  .add_box {
    display: flex;
    justify-content: space-between;
  }
  /deep/ .add_dialog {
    width: 600px;
    min-height: 500px;
    overflow: scroll;

    // .dialog_box {
    //   display: flex;
    //   flex-wrap: nowrap;
    //   justify-content: space-between;
    // }
    .tree_box {
      overflow: scroll;
      height: 400px;
      width: 250px;
    }
  }
}
</style>